<template>
  <div>
    <el-dialog
      :title="form.id ? '编辑banner' : '新增banner'"
      :visible.sync="dialogVisible"
      width="700px"
      :before-close="handleClose"
    >
      <div style="height: 45vh; overflow-y: auto; padding-bottom: 20px">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
          <el-form-item label="banner分类" prop="bannerCate">
            <el-select
              @change="changeCateSelect"
              style="width: 500px"
              v-model="form.bannerCate"
              placeholder="请选择平台"
            >
              <el-option
                v-for="item in bannerCateList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="banner名称" prop="name">
            <el-input
              style="width: 500px"
              placeholder="请输入banner名称"
              v-model="form.name"
            ></el-input>
          </el-form-item>
          <el-form-item label="封面图" prop="pic" label-width="120px">
            <div style="display: flex; ">
              <single-upload
                uploadType="2"
                @uploadSucces="uploadSucces"
                v-model="form.pic"
              >
                <div class="uploadPic" v-if="!form.pic">
                  <i
                    style="font-size: 40px; color: #ccc; font-weight: bold"
                    class="el-icon-plus"
                  ></i>
                </div>
              </single-upload>
              <div style="margin-top: 50px; color: #999">
                上传封面图 (H5封面推荐640*240，官网推荐1920*750)
              </div>
            </div>
          </el-form-item>
          <el-form-item label="内容形式" prop="type">
            <el-radio-group v-model="form.type">
              <el-radio :label="0">上传链接</el-radio>
              <el-radio :label="1">选择文章内容</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="form.type == 0" label="链接地址">
            <el-input
              style="width: 500px"
              placeholder="请输入链接地址"
              v-model="form.url"
            ></el-input>
          </el-form-item>
          <el-form-item v-if="form.type == 1" label="文章分类" prop="cid">
            <el-cascader
              style="width: 500px"
              v-model="form.cid"
              :options="articleCateList"
              :props="props"
              @change="changeCate"
              clearable
            />
          </el-form-item>
          <el-form-item label="文章链接" prop="articleId" v-if="form.type == 1">
            <el-select
              style="width: 500px"
              v-model="form.articleId"
              placeholder="请选择文章链接"
            >
              <el-option
                v-for="item in articleList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              style="width: 100px"
              size="small"
              type="primary"
              @click="onsubmit('form')"
              >确定</el-button
            >
            <el-button
              style="width: 100px"
              size="small"
              @click="handleClose('form')"
              >取消</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import SingleUpload from "@/components/Upload/uploadOne";
import dialogDiy from "@/components/dialogDiy/index.vue";
import {
  addBanner,
  editBanner,
  getArticleList,
  getArticleInfo
} from "@/api/article";
export default {
  components: {
    dialogDiy,
    SingleUpload
  },
  props: {
    bannerCateList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    articleCateList: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  name: "add",
  data() {
    return {
      props: {
        emitPath: false
      },
      dialogVisible: false,
      form: {
        bannerCate: null,
        name: "",
        pic: "",
        type: 0,
        url: "",
        cid: "",
        articleId: ""
      },
      rules: {
        bannerCate: [
          { required: true, message: "请选择平台", trigger: "blur" }
        ],
        name: [
          { required: true, message: "请输入banner名称", trigger: "blur" }
        ],
        pic: [{ required: true, message: "请上传封面图", trigger: "blur" }],
        type: [{ required: true, message: "请选择内容形式", trigger: "blur" }],
        url: [{ required: true, message: "请输入链接地址", trigger: "blur" }],
        cid: [{ required: true, message: "请选择文章分类", trigger: "blur" }],
        articleId: [
          { required: true, message: "请选择文章链接", trigger: "blur" }
        ]
      },
      articleList: []
    };
  },
  methods: {
    changeCateSelect(e) {
      this.$set(this.form, "bannerCate", e);
    },
    getArticleList(id) {
      getArticleList({
        cateId: id,
        pageNum: 1,
        pageSize: 1000,
        type: 1,
      }).then(res => {
        this.articleList = res.data.list;
      });
    },
    changeCate(val) {
      this.form.cid = val
      this.getArticleList(this.form.cid);
      // if (this.form.cid.length > 0) {
      //   this.form.cid = this.form.cid[this.form.cid.length - 1];
      //   this.getArticleList(this.form.cid);
      // }
    },
    uploadSucces() {
      this.$refs.form.validateField("pic");
    },
    handleClose() {
      this.resetForm();
      this.dialogVisible = false;
    },
    async openlog(v) {
      console.log(this.articleCateList,'articleCateList')
      if (v) {
        if (v.type == 1) {
          await getArticleInfo(v.articleId).then(res => {
            v.cid = res.data.cateId;
            this.getArticleList(v.cid);
          });
        }
        this.form = Object.assign({}, v);
      }
      this.dialogVisible = true;
    },
    resetForm() {
      this.form = {
        bannerCate: null,
        name: "",
        pic: "",
        type: 0,
        url: "",
        cid: "",
        articleId: ""
      };
      this.$refs.form.resetFields();
    },
    onsubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.form.type == 0) {
            this.form.articleId = "";
          } else {
            this.form.url = "";
            delete this.form.cid;
          }
          if (this.form.id) {
            editBanner(this.form).then(res => {
              if (res.code == 200) {
                this.$message.success("修改成功");
                this.handleClose();
                this.$emit("getList");
              }
            });
          } else {
            addBanner(this.form).then(res => {
              if (res.code == 200) {
                this.$message.success("添加成功");
                this.handleClose();
                this.$emit("getList");
              }
            });
          }
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.uploadPic {
  width: 90px;
  height: 90px;

  background: #eeeeee;
  border-radius: 8px;
  position: relative;
  > i {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
